<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="UTF-8">
		<title>Monsters Creator</title>
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="format-detection" content="telephone=no">
		<!-- force webkit on 360 -->
		<meta name="renderer" content="webkit" />
		<meta name="force-rendering" content="webkit" />
		<!-- force edge on IE -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="msapplication-tap-highlight" content="no">
		<!-- force full screen on some browser -->
		<meta name="full-screen" content="yes" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="360-fullscreen" content="true" />
		<!-- force screen orientation on some browser -->
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait">
		<meta name="browsermode" content="application">
		<meta name="x5-page-mode" content="app">
		<link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico">
		<link rel="bookmark" href="../static/favicon.ico" />
		<link id="theme" rel="stylesheet" type="text/css" href="../static/css/default.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/main.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
		<script type="text/javascript" src="../static/js/resize.js"></script>
		<script type="text/javascript" src="../static/js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="../static/js/jquery.i18n.properties-min-1.0.9.js"></script>
		<script type="text/javascript" src="../static/js/html2canvas.js"></script>
		<script type="text/javascript" src="../static/js/util.js"></script>
		<!--生成二维码库-->
		<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

	</head>

	<body style="background-color: #999999">

		<div id="toshare">

			<img class="logo-layout" src="../static/images/logo.png" />
			<br>
			<img id="shareimg" src="../static/images/monster1.png" />

			<br/>
			<div class="share-font">
				<h4>

					快识别二维码
					<br>
					来帮我创造的小怪物点个赞吧
				</h4>

			</div>

			<div id="sharecode">
			</div>

		</div>

		<div id="toshare2">
			<img id="createdimg" src="" alt="" />
		</div>

		<div class="savefont">
			<font class="tosharefont">长按保存图片<br>然后你特么自己去分享</font>
		</div>

	</body>

	<script>
		var shareimgObj = document.getElementById("shareimg");
		shareimgObj.src = window.localStorage.getItem("shareimg");

		var box = 70;

		var explorer = window.navigator.userAgent.toLowerCase();

        var scale = 2; //定义任意放大倍数 支持小数
        //判断是不是谷歌浏览器
        if(explorer.indexOf("chrome") >= 0) {
            scale = 4;
            box = 30;
        } else if(explorer.match(/MicroMessenger/i) == "micromessenger") {
            if(navigator.userAgent.match(/android/i)) { //判断是否是Android
                scale = 4;
                box = 30;
            }
        }

        //生成二维码
		var sharecodedom = document.getElementById("sharecode");
        var qrcode = new QRCode(sharecodedom, {
            width: box,
            height: box,
        });
        qrcode.makeCode("www.baidu.com");


		//截图代码
		var copyinfo = document.getElementById("toshare");
		console.log(copyinfo.offsetWidth + ':' + copyinfo.offsetHeight);
		var width = copyinfo.offsetWidth; //获取dom 宽度
		var height = copyinfo.offsetHeight; //获取dom 高度
		var canvas = document.createElement("canvas"); //创建一个canvas节点
		canvas.width = width * scale; //定义canvas 宽度 * 缩放
		canvas.height = height * scale; //定义canvas高度 *缩放
		canvas.getContext("2d").scale(scale, scale); //获取context,设置scale


        var opts = {
			useCORS: true, // 【重要】开启跨域配置
			scale: scale,
			width: width,
			height: height,
			canvas: canvas
		};

		html2canvas(copyinfo, opts).then(function(canvas) {

			console.log(canvas.width + ':' + canvas.height);
			var img = document.getElementById("createdimg");
			img.src = canvas.toDataURL();
			copyinfo.remove();
		});
	</script>

</html>